<!-- 后台首页 -->
<template>
  <div class="flex-box">
    <div class="flex-item">
      <div class="item-left">
        <el-icon :size="56" :color="'#41d49a'">
          <Tickets />
        </el-icon>
      </div>
      <div class="item-right">
        <p style="font-weight: 900">{{ $t("messages.blanketOrder") }}</p>
        <p>{{ OrderTotalData.totalOrder }}</p>
      </div>
    </div>
    <div class="flex-item">
      <div class="item-left">
        <el-icon :size="56" :color="'#3968df'">
          <Coin />
        </el-icon>
      </div>
      <div class="item-right">
        <p style="font-weight: 900">{{ $t("messages.totalSales") }}</p>
        <p>{{ OrderTotalData.totalAmount }}</p>
      </div>
    </div>
    <div class="flex-item">
      <div class="item-left">
        <el-icon :size="56" :color="'#df3939'">
          <Tickets />
        </el-icon>
      </div>
      <div class="item-right">
        <p style="font-weight: 900">{{ $t("messages.orderQuantityToday") }}</p>
        <p>{{ OrderTotalData.totalOrder }}</p>
      </div>
    </div>
    <div class="flex-item">
      <div class="item-left">
        <el-icon :size="56" :color="'#fdea42'">
          <Coin />
        </el-icon>
      </div>
      <div class="item-right">
        <p style="font-weight: 900">{{ $t("messages.orderSalesToday") }}</p>
        <p>{{ OrderTotalData.totayAmount }}</p>
      </div>
    </div>
  </div>
  <div class="echart-box" ref="chartDom"></div>
</template>

<script setup>
import { getOrderTotaldata } from "@/api/index.js";
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";

const chartDom = ref(null);
const OrderTotalData = reactive({
  amountData: [],
  orderData: [],
  totalAmount: 0,
  todayOrder: 0,
  totalOrder: 0,
  totayAmount: 0,
  xData: [],
});

const getOrderTotal = async () => {
  const res = await getOrderTotaldata();
  Object.keys(OrderTotalData).forEach((key) => {
    if (res.hasOwnProperty(key)) {
      OrderTotalData[key] = res[key];
    }
  });

  // 数据更新后，初始化 ECharts 实例并设置配置

  if (chartDom.value) {
    initChart(
      OrderTotalData.xData,
      OrderTotalData.orderData,
      OrderTotalData.amountData
    );
  }
};

// 初始化图表
const initChart = (xData, orderData, amountData) => {
  let mychart = echarts.init(chartDom.value);
  window.addEventListener("resize", () => {
    mychart.resize();
  });
  mychart.setOption({
    title: {
      text: "数据统计",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["订单", "销售额"],
    },
    grid: {
      top: "14%", // 增加这个值可以使图表向下移动
      bottom: "10%",
      left: "16%",
    },
    xAxis: {
      type: "category",
      data: xData, // 使用 OrderTotalData.xData 作为 x 轴数据
    },
    yAxis: {
      type: "value",
      offset: 90, // 正值向下偏移
    },
    series: [
      {
        name: "订单",
        type: "bar",
        data: orderData, // 使用 OrderTotalData.orderData 作为订单数据
        barWidth: "20%", // 设置柱子宽度为类目宽度的60%
        itemStyle: {
          color: {
            type: "linear", // 线性渐变
            x: 0, // 渐变开始位置的 x 坐标
            y: 0, // 渐变开始位置的 y 坐标
            x2: 0, // 渐变结束位置的 x 坐标
            y2: 1, // 渐变结束位置的 y 坐标
            colorStops: [
              {
                offset: 0,
                color: "#384ce2", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#38c6e2", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "销售额",
        type: "bar",
        data: amountData, // 使用 OrderTotalData.amountData 作为销售额数据
        barWidth: "20%", // 设置柱子宽度为类目宽度的60%
        itemStyle: {
          color: {
            type: "linear", // 线性渐变
            x: 0, // 渐变开始位置的 x 坐标
            y: 0, // 渐变开始位置的 y 坐标
            x2: 0, // 渐变结束位置的 x 坐标
            y2: 1, // 渐变结束位置的 y 坐标
            colorStops: [
              {
                offset: 0,
                color: "#f46231", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#f69473", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
};

onMounted(() => {
  getOrderTotal(); // 在组件挂载后获取数据并初始化图表
});
</script>

<style lang="less" scoped>
.flex-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: @tab-color;
  .flex-item {
    background: #ffffff;
    flex: 1;
    height: 70px;
    border: 1px solid #ccc;
    margin: 5px;
    box-shadow: 2px 2px 2px #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item-left {
      margin-left: 40px;
    }
    .item-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 50%;
      height: 80%;
      margin-right: 40px;
    }
  }
}

.echart-box {
  margin: 40px auto;
  width: 100%;
  height: 65vh;
}
</style>
